<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas案例</title>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="300" style="border: 1px solid black;">
			您的浏览器不支持canvas，建议使用最新版的Chrome
		</canvas>
		<script >
			//获取Canvas对象（画布）
			var c = document.getElementById("myCanvas");
			//检测当前浏览器是否支持Canvas对象
			if(c.getContext){
			//获取对应的CanvasRenderingContext2D对象
				var ctx = c.getContext("2d");
				//创建新的图片对象
				var img = new Image();
				//指定图片的URL
				img.src = "../img/猫猫.jpg";
				//浏览器加载图片完毕后在绘制图片
				img.onload = function(){
					//以Canvas画布上的坐标（50，50）为起始点，绘制图像
					//图像的宽度和高度分别缩放到300px和300px
					ctx.drawImage(img,50,50,100,100)
				}
			}
			
		</script>
	</body>
</html>